<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <h1>我是App组件</h1>
  <hr>
  <h1>一个人的信息：</h1>
  <h2 v-show="person.name">姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2 v-show="person.sex">性别：{{ person.sex }}</h2>

  <!-- 使用 reactive 实现将对象改成响应式数据-->
  <h2>工作种类2：{{ person.jobReactive.type }}</h2>
  <h2>工作薪水2：{{ person.jobReactive.salary }}</h2>
  <h2>爱好：{{ person.hobby }}</h2>
  <h2>测试的数据：{{ person.jobReactive.a.b.c }}</h2>

  <button @click="changeInfo">修改人的信息</button>
  <button @click="addSex">添加一个sex属性</button>
  <button @click="deleteName">删除一个name属性</button>

</template>

<script>
// 引入ref 函数
import {reactive} from "vue";

export default {
  name: 'App',
  // setup: function () {
  //
  // }

  // Vue3引入了新的配置项，值是一个函数，setup是所有Composition API（组合API）“ 表演的舞台 ”。
  // 组件中所用到的：数据、方法等等，均要配置在setup中。
  // - setup函数的两种返回值：
  //    - 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。【重点关注！】
  //    - 若返回一个渲染函数：则可以自定义渲染内容。【了解】
  setup() {
    // 【todo 通过 reactive 封装整个对象的方式来实现数据的响应式】
    let person = reactive({
      name: '张三',
      age: 18,
      jobReactive: {
        type: '后端工程师',
        salary: '30k',
        a: {
          b: {
            c: 9999,
          }
        }
      },
      hobby: ['抽烟', '喝酒', '烫头']
    });

    // 方法
    function changeInfo() {
      person.name = '李四';
      person.age = 19;
      person.jobReactive.type = '产品经理';
      person.jobReactive.salary = '80k';

      // vue3可以直接通过索引改，因为其使用了Proxy，而vue2不能直接通过索引改，因为其使用了 Object.defineProperty
      person.hobby[0] = '学习';
      person.jobReactive.a.b.c = 10000;
    }

    function addSex() {
      person.sex = '女';
    }

    function deleteName() {
      // 在js中删除一个对象的属性
      delete person.name;
    }

    // 方式一：返回对象【常用】
    return {
      person,
      changeInfo,
      addSex,
      deleteName,
    }
  },
}
</script>

<style>

</style>
